<script setup>
// 新增车辆
import { ref,onMounted,watch} from 'vue'
import { message } from 'ant-design-vue'

import {getTransportLineByIdAPI,postTransportLineAPI} from '@/services/transportLine'

// 是否打开模态框-用于双向绑定
const props = defineProps(['open', 'id'])
const emit = defineEmits(['update:open', 'ok'])

// 表单组件实例
const formRef = ref()

// 表单字段
const formState = ref({
  departureTime:undefined,
  estimatedTime:undefined,
  name:undefined,
  id:undefined,
  period:undefined,
  periodName:undefined,
  transportLineId:undefined,
})
const lineName = ref()
const name= async(id)=>{
  const res = await getTransportLineByIdAPI(id)
  console.log(res)
  lineName.value=res.data.name
  formState.value.id = res.data.id
  formState.value.transportLineId = res.data.id
}



//监听是否id有值
watch(
  () => [props.id, props.open],
  ([id]) => {
    if (id) {
  name(id)
    } else {
      formRef.value?.resetFields()
    }
  },
  {
    immediate: true,
  },
)
//下拉列表
const typeList=ref([
    {value:1,name:'天'},
    {value:2,name:'周'},
    {value:3,name:'月'},
])

const onOk=()=>{
  if(formState.value.period===1){
    formState.value.periodName='天'
  }
  if(formState.value.period===2){
    formState.value.periodName='周'
  }
  if(formState.value.period===3){
    formState.value.periodName='月'
  }
    emit('ok',formState.value)
}

</script>

<template>
  <a-modal
    :open="open"
    @update:open="emit('update:open', $event)"
    :title="'新增车次'"
    @ok="onOk"
  
  >
    <a-form ref="formRef" :model="formState" :labelCol="{ span: 5 }">
      <a-form-item label="线路名称" name="name" required
       >
        <a-input v-model:value="lineName"  disabled/>
      </a-form-item>
      <a-form-item label="车次名称" name="name" required
       >
        <a-input v-model:value="formState.name"   />
    
      </a-form-item>
      <a-form-item label="发车时间" name="departureTime" required 
      >
        <a-time-picker v-model:value="formState.departureTime" format="HH:mm" />
      </a-form-item>

       
      <a-form-item label="持续时间" name="estimatedTime" required 
      >
        <a-input v-model:value="formState.estimatedTime"  suffix="分钟" />
      </a-form-item>
      <a-form-item label="发车周期" name="period" required 
       >
         <a-select v-model:value="formState.period" >
        <a-select-option v-for="item in typeList" :key="item.value" :value="item.value" >{{item.name}}</a-select-option>
          </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
